<template>
<div>
    <ul class="mini-pages-list" v-if="itemList.length">
    	   <li class="mini-pages-item" v-for="item in itemList">
    	       <button class="mini-pages-btn" :class="{'active': item.active}" @click="pageItemClick(item)">{{item.num}}</button>
    	   </li>
    </ul>
</div>
</template>

<script>
export default {
    props: {
        total: String,
        pageSize: String,
        param: String,
        showNum: String,
    },
    data () {
        return {
            itemList: [],
            currentNum: 1,
        }
    },
    watch: {
        total() {
            this.pageChange();
        }
    },
    mounted() {
        if (this.total) {
            this.pagesInit();
        }
    },
    methods: {
       pagesInit() {
           if (this.total <= this.pageSize) {
               this.itemList = [];
           } else {
                var pageTotal = Math.ceil(this.total / this.pageSize);
                var showNum = this.showNum ? this.showNum : 5;
                var itemList = []
                for (var i = 1; i <= pageTotal; i++) {
                    if (i <= showNum) {
                        itemList.push({'num': i,'active': false});
                    }
                }
                for (var i = 0; i < itemList.length; i++) {
                    if (1 == itemList[i].num) {
                        itemList[i].active = true;
                    } else {
                        itemList[i].active = false;
                    }
                }
                this.itemList = itemList;
           }
       },
       pageChange() {
            if (this.total <= this.pageSize) {
                this.itemList = [];
            } else {
                var pageTotal = Math.ceil(this.total / this.pageSize);
                var showNum = this.showNum ? this.showNum : 5;
                var tempNum = parseInt(showNum / 2);
                var itemList = []
                if (this.currentNum <= tempNum + 1) {
                    for (var i = 1; i <= pageTotal; i++) {
                        if (i <= showNum) {
                            itemList.push({'num': i,'active': false});
                        }
                    }
                } else {
                    if (this.currentNum >= pageTotal - tempNum) {
                        for (var i = 1; i <= pageTotal; i++) {
                            if (i > pageTotal - showNum) {
                                itemList.push({'num': i,'active': false});
                            }
                        }
                    } else {
                        for (var i = 1; i <= pageTotal; i++) {
                            if ((i >= this.currentNum - tempNum) && (i <= this.currentNum + tempNum)) {
                                itemList.push({'num': i,'active': false});
                            }
                        }
                    }
                }
                for (var i = 0; i < itemList.length; i++) {
                    if (this.currentNum == itemList[i].num) {
                        itemList[i].active = true;
                    } else {
                        itemList[i].active = false;
                    }
                }
                this.itemList = itemList;
            }
       },
       pageItemClick(item) {
            this.currentNum = item.num;
            for (var i = 0; i < this.itemList.length; i++) {
                if (item.num == this.itemList[i].num) {
                    this.itemList[i].active = true;
                } else {
                    this.itemList[i].active = false;
                }
            }
            this.param.currentPage = this.currentNum;
            this.pageChange();
            this.$emit('pageChange', {num: this.currentNum,param:this.param});
       },
    }
}
</script>
